<template>
  <div class="left-equipment">
    <div class="tab-title" :class="isHall ? 'tab-title1' : ''">
      <span class="dec">基地设备实时概况</span>
    </div>
    <div class="base-content">
      <div class="t-a">
        <div class="a-name">气象土壤监测站</div>
        <div class="a-b">
          <img class="a-w" src="../../assets/base_icon_1.png" alt="" />
          <div class="a-num">{{equipmentNum}}</div>
          <div class="a-unit">台</div>
        </div>
      </div>
      <div class="t-a" style="margin-left: 60px">
        <div class="a-name">视频监控</div>
        <div class="a-b">
          <img class="a-v" src="../../assets/base_icon_2.png" alt=""/>
          <div class="a-num">{{equipmentVideoNum}}</div>
          <div class="a-unit">台</div>
        </div>
      </div>
    </div>
    <div class="data-content">
      <div class="title-content">
        <template v-for="(t, index) in list">
          <div :key="index" class="title" :class="active === index ? 'active-title' : ''" @click="change(t, index)"  :title="t.name">
            {{ t.name }}
          </div>
        </template>
      </div>
      <div class="rant-contect" :key="index">
        <vue-seamless-scroll :data="needsData" :class-option="classOption">
          <div v-for="(d, m) in needsData" :key="m" class="item-content">
            <div class="d-item" v-for="(f, l) in d.a" :key="l">
              <div class="d-e">
                <div class="d-name">{{ f.name }}</div>
                <div class="d-b">
                  <img class="d-w" :src="f.img" alt="" />
                  <div class="d-num">{{ f.value||'—' }}</div>
                  <div>{{ f.unit }}</div>
                </div>
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isHall: {
      type: Number,
    },
    equipmentVideoNum: {
      type: Number,
    },
  },
  data() {
    return {
      equipmentNum:0,
      active: 0,
      needsData: [],
      list: [
       //#region
        // {
        //   name: '一号基地',
        //   data: [
        //     {
        //       a: [
        //         {
        //           name: '空气温度',
        //           img: require('../../assets/base_icon_3.png'),
        //           kqwd: '0.01',
        //         },
        //         {
        //           name: '空气相对温度',
        //           img: require('../../assets/base_icon_3.png'),
        //           kqwd: '0.01',
        //         },
        //         {
        //           name: '光照度',
        //           img: require('../../assets/base_icon_4.png'),
        //           kqwd: '0.01',
        //         },
        //       ],
        //     },
        //     {
        //       a: [
        //         {
        //           name: '土壤温度15cm',
        //           img: require('../../assets/base_icon_5.png'),
        //           kqwd: '0.01',
        //         },
        //         {
        //           name: '土壤温度35cm',
        //           img: require('../../assets/base_icon_5.png'),
        //           kqwd: '0.01',
        //         },
        //         {
        //           name: '土壤PH值',
        //           img: require('../../assets/base_icon_6.png'),
        //           kqwd: '0.01',
        //         },
        //       ],
        //     },
        //   ],
        // },
        //#endRegion
      ],
    }
  },
  watch: {
    isHall: {
      immediate: true,
      handler: function (val) {
        if (val) {
        }
      },
    },
  },
  created() {},
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 78, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted() {
  
    this.getListDevicePropertyData()
  },
  methods: {
    change(data, index) {
      this.active = index
      this.needsData = data.data
      console.log(data.data);
    },
    getListDevicePropertyData() {
      const token = 'Vm74snIEgOPYvYSolFaz9mA'
      this.$axios({
        method: 'post',
        url: ` https://tqppszt.linping.gov.cn/api/agri/saas/device/listDevicePropertyData?token=${token}`,
      }).then((res) => {
        if (res.status === 200) {
          let result = res.data.data && res.data.data.length && res.data.data
          this.equipmentNum = res.data.data && res.data.data.length
          let arr = []
          result.map((item) => {
            const obj = {}
            obj.name = item.baseUniqueName //baseUniqueName
            obj.data = []
            const obj1 = {}
            obj1.a = []
            const obj2 = {}
            obj2.a = []
            item.devicePropertyDTOList.map((k) => {
              if ( k.identifier === 'Soil_15cm_Temperature') {
                k.value = k.values&&k.values.length&&k.values[0].value
                k.name = '土壤温度15cm'
                k.a_Soil_15cm_Temperature = 'Soil_15cm_Temperature'
                k.img = require('../../assets/base_icon_5.png'),
                obj1.a.push(k)
              }
              if ( k.identifier === 'Soil_35cm_Humidity') {
                 k.name = '土壤温度35cm'
                 k.value = k.values&&k.values.length&&k.values[0].value
                k.a_Soil_35cm_Humidity = 'Soil_15cm_Temperature'
                k.img = require('../../assets/base_icon_5.png'),
                obj1.a.push(k)
              }
              if(k.identifier === 'SoilPH'){
                 k.name = '土壤PH值'
                 k.value = k.values&&k.values.length&&k.values[0].value
                k.a_SoilPH = 'a_SoilPH'
                k.img = require('../../assets/base_icon_6.png'),
                obj1.a.push(k)
              }

                if ( k.identifier === 'Temperature') {
                k.value = k.values&&k.values.length&&k.values[0].value
                k.name = '空气温度'
                k.a_Temperature = 'Temperature'
                k.img = require('../../assets/base_icon_3.png'),
                obj2.a.push(k)
              }
              if ( k.identifier === 'Humidity') {
                 k.name = '空气相对温度'
                 k.value = k.values&&k.values.length&&k.values[0].value
                k.a_Humidity = 'Humidity'
                k.img = require('../../assets/base_icon_3.png'),
                obj2.a.push(k)
              }
              if(k.identifier === 'LightLux'){
                 k.name = '光照度'
                 k.value = k.values&&k.values.length&&k.values[0].value
                k.a_LightLux = 'LightLux'
                k.img = require('../../assets/base_icon_4.png'),
                obj2.a.push(k)
              }
            })
            obj.data.push(obj2)
            obj.data.push(obj1)
            arr.push(obj)
          })
          this.list =arr
          this.needsData = this.list[0].data
        } else {
          console.log(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.left-equipment {
   ::-webkit-scrollbar {
      width: 2px;
      height: 2px;
    }
    ::-webkit-scrollbar-track {
        background: #def7ff40;
        border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(1, 221, 255, 0.239);
        border-radius: 2px;
    }
  width: 360px;
  height: 172px;
  color: #fff;
  padding-left: 24px;
  .tab-title1 {
    padding-top: 24px !important;
  }
  .tab-title {
    padding: 24px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .dec {
      width: 196px;
      height: 14px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      line-height: 14px;
    }
  }
  .base-content {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 0 10px 0;
    .t-a {
      display: flex;
      flex-direction: column;
      .a-name {
        width: 84px;
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.4);
        line-height: 12px;
      }
      .a-b {
        display: flex;
        align-items: center;
        margin-top: 8px;
        .a-w {
          width: 15px;
          height: 20px;
        }
        .a-v {
          width: 20px;
          height: 20px;
        }
        .a-num {
          height: 20px;
          font-size: 22px;
          font-weight: 600;
          color: #ffffff;
          line-height: 20px;
          padding-left: 10px;
        }
        .a-unit {
          padding: 2px 0 0 10px;
          height: 17px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          line-height: 17px;
        }
      }
    }
  }
  .data-content {
    height: 78px;
    overflow: hidden;
    box-sizing: border-box;
    .title-content {
      display: flex;
      max-width: 320px;
      overflow-x: scroll;
      .title {
        margin-right: 28px;
        min-width: 88px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.4);
        cursor: pointer;
      }
      .active-title {
        padding-bottom: 4px;
        margin-right: 28px;
        width: 48px;
        font-size: 12px;
        font-weight: 500;
        color: #00dfff;
        border-bottom: 2px solid #00dfff;
        cursor: pointer;
      }
    }
    .rant-contect {
      overflow: hidden;
      margin-top: 10px;
      .item-content {
        width: 90%;
        display: flex;
        justify-content: space-between;
        .d-item {
          height: 78px;
          .d-e {
            display: flex;
            flex-direction: column;
            .d-name {
              height: 12px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
               color: rgba(255, 255, 255, 0.4);
              line-height: 12px;
            }
            .d-b {
              display: flex;
              align-items: center;
              .d-w {
                width: 16px;
                height: 16px;
              }
              .d-num {
                padding: 2px 0 0 5px;
                font-size: 20px;
              }
            }
          }
        }
      }
    }
  }
}
</style>